<template>
    <div>
        <div class="rm">
            <ul>
                <li>
                    <img src="../../../assets/imges/比亚迪.jpg" alt="">
                    <img src="../../../assets/imges/特斯拉.jpg" alt="">
                    <img src="../../../assets/imges/大众.jpg" alt="">
                    <img src="../../../assets/imges/五菱宏光.jpg" alt="">
                    <img src="../../../assets/imges/蔚来.jpg" alt="">
                </li>
                <li>
                    <span>比亚迪</span>
                    <span>特斯拉</span>
                    <span>大众</span>
                    <span>五菱宏光</span>
                    <span class="wl">蔚来</span>
                </li>
                <li>
                    <span>价格</span>
                    <span>5万以下</span>
                    <span>5-8万</span>
                    <span>12-18万</span>
                    <span>18万以上</span>
                </li>
                <li>
                    <span>续航</span>
                    <span>200-300</span>
                    <span>300-400</span>
                    <span>400-500</span>
                    <span>500以上</span>
                </li>
                <li>
                    <span>类别</span>
                    <span>纯电动</span>
                    <span>插电混动</span>
                    <span>SUV</span>
                    <span>自主品牌</span>
                </li>
            </ul>
        </div>
        <van-index-bar>
            <van-index-anchor index="A" />
            <!-- <van-cell title="aodi" /> -->
            <div class="tt">
                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/奥迪.jpg" alt="">
                        奥迪
                    </span>
                    <span>在售8款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>奥迪Q4 e-tron</span>
                        <span class="span2">29.99-37.71万</span>
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪5.jpg" alt="">
                        <span>奥迪RS e-tron GT</span>
                        <span class="span2">146.88万</span>

                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>奥迪A6L 插电...</span>
                        <span class="span2">50.80万</span>
                    </li>
                </ul>

                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/埃安.jpg" alt="">
                        埃安
                    </span>
                    <span>在售4款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION S</span>
                        <span class="span2">13.98-19.16万</span>
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>AION Y</span>
                        <span class="span2">13.76-20.26万</span>
                        
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION LX</span>
                        <span class="span2">28.66-46.96万</span>
                    </li>
                </ul>

                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/AITO.jpg" alt="">
                        AITO
                    </span>
                    <span>在售2款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION S</span>
                        <span class="span2">13.98-19.16万</span>
                    </li>
                    <li class="li2">
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>AION Y</span>
                        <span class="span2">13.76-20.26万</span>
                    </li>
                </ul>
            </div>


            <van-index-anchor index="B" />
            <div class="tt">
                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/奥迪.jpg" alt="">
                        奥迪
                    </span>
                    <span>在售8款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>奥迪Q4 e-tron</span>
                        <span class="span2">29.99-37.71万</span>
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪5.jpg" alt="">
                        <span>奥迪RS e-tron GT</span>
                        <span class="span2">146.88万</span>

                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>奥迪A6L 插电...</span>
                        <span class="span2">50.80万</span>
                    </li>
                </ul>

                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/埃安.jpg" alt="">
                        埃安
                    </span>
                    <span>在售4款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION S</span>
                        <span class="span2">13.98-19.16万</span>
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>AION Y</span>
                        <span class="span2">13.76-20.26万</span>
                        
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION LX</span>
                        <span class="span2">28.66-46.96万</span>
                    </li>
                </ul>

                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/AITO.jpg" alt="">
                        AITO
                    </span>
                    <span>在售2款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION S</span>
                        <span class="span2">13.98-19.16万</span>
                    </li>
                    <li class="li2">
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>AION Y</span>
                        <span class="span2">13.76-20.26万</span>
                    </li>
                </ul>
            </div>


            <van-index-anchor index="C" />
            <!-- <van-cell title="aodi" /> -->
            <div class="tt">
                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/奥迪.jpg" alt="">
                        奥迪
                    </span>
                    <span>在售8款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>奥迪Q4 e-tron</span>
                        <span class="span2">29.99-37.71万</span>
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪5.jpg" alt="">
                        <span>奥迪RS e-tron GT</span>
                        <span class="span2">146.88万</span>

                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>奥迪A6L 插电...</span>
                        <span class="span2">50.80万</span>
                    </li>
                </ul>

                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/埃安.jpg" alt="">
                        埃安
                    </span>
                    <span>在售4款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION S</span>
                        <span class="span2">13.98-19.16万</span>
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>AION Y</span>
                        <span class="span2">13.76-20.26万</span>
                        
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION LX</span>
                        <span class="span2">28.66-46.96万</span>
                    </li>
                </ul>

                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/AITO.jpg" alt="">
                        AITO
                    </span>
                    <span>在售2款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION S</span>
                        <span class="span2">13.98-19.16万</span>
                    </li>
                    <li class="li2">
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>AION Y</span>
                        <span class="span2">13.76-20.26万</span>
                    </li>
                </ul>
            </div>


            <van-index-anchor index="D" />
            <!-- <van-cell title="aodi" /> -->
            <div class="tt">
                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/奥迪.jpg" alt="">
                        奥迪
                    </span>
                    <span>在售8款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>奥迪Q4 e-tron</span>
                        <span class="span2">29.99-37.71万</span>
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪5.jpg" alt="">
                        <span>奥迪RS e-tron GT</span>
                        <span class="span2">146.88万</span>

                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>奥迪A6L 插电...</span>
                        <span class="span2">50.80万</span>
                    </li>
                </ul>

                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/埃安.jpg" alt="">
                        埃安
                    </span>
                    <span>在售4款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION S</span>
                        <span class="span2">13.98-19.16万</span>
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>AION Y</span>
                        <span class="span2">13.76-20.26万</span>
                        
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION LX</span>
                        <span class="span2">28.66-46.96万</span>
                    </li>
                </ul>

                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/AITO.jpg" alt="">
                        AITO
                    </span>
                    <span>在售2款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION S</span>
                        <span class="span2">13.98-19.16万</span>
                    </li>
                    <li class="li2">
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>AION Y</span>
                        <span class="span2">13.76-20.26万</span>
                    </li>
                </ul>
            </div>


            <van-index-anchor index="E" />
            <!-- <van-cell title="aodi" /> -->
            <div class="tt">
                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/奥迪.jpg" alt="">
                        奥迪
                    </span>
                    <span>在售8款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>奥迪Q4 e-tron</span>
                        <span class="span2">29.99-37.71万</span>
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪5.jpg" alt="">
                        <span>奥迪RS e-tron GT</span>
                        <span class="span2">146.88万</span>

                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>奥迪A6L 插电...</span>
                        <span class="span2">50.80万</span>
                    </li>
                </ul>

                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/埃安.jpg" alt="">
                        埃安
                    </span>
                    <span>在售4款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION S</span>
                        <span class="span2">13.98-19.16万</span>
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>AION Y</span>
                        <span class="span2">13.76-20.26万</span>
                        
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION LX</span>
                        <span class="span2">28.66-46.96万</span>
                    </li>
                </ul>

                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/AITO.jpg" alt="">
                        AITO
                    </span>
                    <span>在售2款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION S</span>
                        <span class="span2">13.98-19.16万</span>
                    </li>
                    <li class="li2">
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>AION Y</span>
                        <span class="span2">13.76-20.26万</span>
                    </li>
                </ul>
            </div>


            <van-index-anchor index="F" />
            <!-- <van-cell title="aodi" /> -->
            <div class="tt">
                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/奥迪.jpg" alt="">
                        奥迪
                    </span>
                    <span>在售8款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>奥迪Q4 e-tron</span>
                        <span class="span2">29.99-37.71万</span>
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪5.jpg" alt="">
                        <span>奥迪RS e-tron GT</span>
                        <span class="span2">146.88万</span>

                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>奥迪A6L 插电...</span>
                        <span class="span2">50.80万</span>
                    </li>
                </ul>

                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/埃安.jpg" alt="">
                        埃安
                    </span>
                    <span>在售4款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION S</span>
                        <span class="span2">13.98-19.16万</span>
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>AION Y</span>
                        <span class="span2">13.76-20.26万</span>
                        
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION LX</span>
                        <span class="span2">28.66-46.96万</span>
                    </li>
                </ul>

                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/AITO.jpg" alt="">
                        AITO
                    </span>
                    <span>在售2款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION S</span>
                        <span class="span2">13.98-19.16万</span>
                    </li>
                    <li class="li2">
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>AION Y</span>
                        <span class="span2">13.76-20.26万</span>
                    </li>
                </ul>
            </div>


            <van-index-anchor index="G" />
            <!-- <van-cell title="aodi" /> -->
            <div class="tt">
                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/奥迪.jpg" alt="">
                        奥迪
                    </span>
                    <span>在售8款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>奥迪Q4 e-tron</span>
                        <span class="span2">29.99-37.71万</span>
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪5.jpg" alt="">
                        <span>奥迪RS e-tron GT</span>
                        <span class="span2">146.88万</span>

                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>奥迪A6L 插电...</span>
                        <span class="span2">50.80万</span>
                    </li>
                </ul>

                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/埃安.jpg" alt="">
                        埃安
                    </span>
                    <span>在售4款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION S</span>
                        <span class="span2">13.98-19.16万</span>
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>AION Y</span>
                        <span class="span2">13.76-20.26万</span>
                        
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION LX</span>
                        <span class="span2">28.66-46.96万</span>
                    </li>
                </ul>

                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/AITO.jpg" alt="">
                        AITO
                    </span>
                    <span>在售2款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION S</span>
                        <span class="span2">13.98-19.16万</span>
                    </li>
                    <li class="li2">
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>AION Y</span>
                        <span class="span2">13.76-20.26万</span>
                    </li>
                </ul>
            </div>


            <van-index-anchor index="H" />
            <!-- <van-cell title="aodi" /> -->
            <div class="tt">
                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/奥迪.jpg" alt="">
                        奥迪
                    </span>
                    <span>在售8款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>奥迪Q4 e-tron</span>
                        <span class="span2">29.99-37.71万</span>
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪5.jpg" alt="">
                        <span>奥迪RS e-tron GT</span>
                        <span class="span2">146.88万</span>

                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>奥迪A6L 插电...</span>
                        <span class="span2">50.80万</span>
                    </li>
                </ul>

                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/埃安.jpg" alt="">
                        埃安
                    </span>
                    <span>在售4款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION S</span>
                        <span class="span2">13.98-19.16万</span>
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>AION Y</span>
                        <span class="span2">13.76-20.26万</span>
                        
                    </li>
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION LX</span>
                        <span class="span2">28.66-46.96万</span>
                    </li>
                </ul>

                <div class="tou">
                    <span class="span1">
                        <img src="../../../assets/imges/AITO.jpg" alt="">
                        AITO
                    </span>
                    <span>在售2款></span>
                </div>
                <ul class="ul2">
                    <li>
                        <img src="../../../assets/imges/奥迪6.jpg" alt="">
                        <span>AION S</span>
                        <span class="span2">13.98-19.16万</span>
                    </li>
                    <li class="li2">
                        <img src="../../../assets/imges/奥迪4.jpg" alt="">
                        <span>AION Y</span>
                        <span class="span2">13.76-20.26万</span>
                    </li>
                </ul>
            </div>
        </van-index-bar>
    </div>
</template>

<script>
// import Vue from 'vue';
// import { IndexBar, IndexAnchor,Cell } from 'vant';
// Vue.use(IndexBar);
// Vue.use(IndexAnchor);
// Vue.use(Cell);
export default {

}
</script>

<style lang="scss" scoped>
div {
    font-size: 32px;

    .rm {
        width: 93%;
        margin-left: 3%;
        background-color: white;
        border-radius: 15px;
        line-height: 50px;
        ul {
            li {
                display: flex;
                justify-content: space-between;
                align-items: center;

                img {
                    width: 120px;
                }

                .wl {
                    margin-right: 12px;
                }
            }
        }
    }

    .tt {
        background-color: white;
        border-radius: 20px;
        padding: 10px;

        .tou {
            padding-top: 8px;
            line-height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .span1 {
                display: flex;
                align-items: center;

                img {
                    width: 80px;
                }
            }
        }

        .ul2 {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 28px;
            li{
                width: 33%;
                display: flex;
                flex-direction: column;
                text-align: center;
                img{
                    width: 230px;
                }
                .span2{
                    color: red;
                }
            }
        }
    }
}
</style>